<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>WE COPYRIGHT CHAIN FOUNDATION LTD. - reset the password</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<link rel="icon" type="image/x-icon" th:href="@{~/images/favicon.ico}">
<link th:href="@{~/css/bootstrap.css}" rel='stylesheet' type='text/css' />
<link th:href="@{~/css/font-awesome.css}" rel="stylesheet"> 
<link rel="stylesheet" th:href="@{~/css/slider.css}">
<link th:href="@{~/css/style.css}" rel='stylesheet' type='text/css' />	
<link rel="stylesheet" type="text/css" th:href="@{~/css/mislider.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{~/css/mislider-skin-cameo.css}"/>
</head>
	<body>
	<div id="" style="position: relative;">
	

	<div class="top_banner" id="topl">
		<!-- SVG Arrows -->
		<div class="svg-wrap">
			<svg width="64" height="64" viewBox="0 0 64 64">
				<path id="arrow-left" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z" />
			</svg>
			<svg width="64" height="64" viewBox="0 0 64 64">
				<path id="arrow-right" d="M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z" />
			</svg>
		</div>
		<div class="top_header_agile_info_w3ls">
		  <nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">copyright</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<h1><a class="navbar-brand" href="company_en.html"  th:href="@{/company_en.html}"><img style="margin-top:4px;" src="../static/images/logoll.png" th:src="@{~/images/logoll.png}"/></a><span class="ospan">retrieve password</span></h1>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<style type="text/css">
	.m_nav li>a {color: #FFFFff;}
	.top_header_agile_info_w3ls{border-bottom: 1px solid #ccc;}
	.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus{color: #666;}
	.ospan{margin: 15px; display: inline-block;color:#FFFFff;font-weight:0;}
</style>
					<div id="m_nav_container" class="m_nav wthree_bg">
						<nav class="menu menu--sebastian">
							<ul id="m_nav_list" class="m_nav menu__list">
								
								<li class="m_nav_item" id="moble_nav_item_6"> <a th:href="@{~/auth/loginPage_en.html}" class="link link--kumya"><span data-letters="login/registration">login/registration</span></a></li>
							</ul>
						</nav>
					</div>

					</nav>
				</div>
		</div>
	
	
		<!--<div class="sleekslider" id="home">
	
			<div class="slide active bg-1">
				
			</div>	
		</div>	-->
		
		
      <!--welcome-->
 </div>
	</div>

<style type="text/css">
	.formd{padding-top: 120px; min-height: 892px;}
</style>
<div class="formd">
	

<div class=" container">
	 <ul class="oul col-md-offset-2 col-sm-8">
     	<li class="col-lg-3" id="step-status1">
     		<span class="activeli">	1</span>
     		<span class="activeli">	</span>
     	</li>
     	<li class="col-lg-4" id="step-status2">
     		<span>	2</span>
     		<span>	</span>
     	</li>
     	<li class="col-lg-4" id="step-status3">
     		<span>	3</span>
     		<span>	</span>
     	</li>
     	<li class="col-lg-1">
     		<span id="step-status4">	4</span>
     		<span style="background: #fff;">	</span>
     		
     	</li>
     	<div style="clear: both;">
     		
     	</div>
     </ul>
<div class="box col-md-offset-3 col-sm-8" style="margin-top: 40px;">
      <!--<p id="title">
      	<span class="select">找回密码</span>
     </p>-->
     
    
     
     
  <style type="text/css">
   .oul{margin-top: 40px;}
  .oul li{float: left; padding: 0;position: relative;}
  .activeli{background: #00ACEE!important;}
  .oul li span:first-of-type{width: 40px; height: 40px;display: inline-block; text-align: center; 
  background: #f0f0f0; line-height: 40px; color: #fff; border-radius: 50%; float: left;}
    .oul li span:last-of-type{width: 100%; height: 3px;display: inline-block; 
  background: #f0f0f0; float: left; position: absolute;top: 20px;}
       	.select{    float: left;
    padding: 0 20px;
    text-align: center;
    border-bottom: 2px solid #00ACEE!important;
    margin-left: 20px;
    color: #00ACEE;
    }
    
        #title{
      line-height: 40px;
      font-size: 16px;
      font-weight: bold;
      overflow: hidden;
    }
    #title span{
      float: left;
     padding: 0 20px;
      text-align: center;
      border: 1px solid #fff;
      margin-left: 20px;
    }
  
    #content{
      margin-top: 20px;
    }
    #content li{

      overflow: hidden;
      display: none;
    }
 
  
    #content .show{
      display: block;
    }
    
    
    
       </style>
    
      <ul id="content">
        <li class="show">
           <div class="log-wrap cl">
                <div class="log-content cl">
                    <div class="wpl pos cl">
                        <div class="log-row-cx cl">
                        	<div class="reg_left pos col-lg-8">
                            
                            <form action="" method="post" onsubmit="return false" class="regForm" id="step1">
                                <div class="reg_cont_input">
                                	<label class="login-icon pos">
										<i class="fa fa-user fa-2x fss"></i>
                                        <input type="text" name="userName" autocomplete="off" class="log-input mls" datatype="username" maxlength="20" placeholder="Username">
                                        <div class="Validform_checktip"></div>
									</label>
                                   <label class="login-icon fg-code pos">
                                            <i class=" fss log-i fa fa-envelope fa-2x"></i>
                                            <input id="forgot-code" type="text" name="vrifyCode" placeholder="Verification Code" maxlength="4" class="log-input-half login-pwd mls log-input" style="margin-left: 40px!important;">
                                        </label>
                                        <div class="fg-code-wp"> 
                                            <span class="fg-code-pic">
                                                <img alt="Verification Code" onclick = "this.src='/auth/defaultKaptcha?d='+new Date()*1" th:src="@{/auth/defaultKaptcha}" />
                                            </span>
                                            <!-- <a class="fg-code-t" href="javascript:;" >换一张</a> -->
                                        </div>
                                   <!--  <a href="login3.html" class="lang-btn" id="regInputSubmit">
                                    	<span>重新设置密码</span>
                                    </a> -->
                                    <button type="button" class="lang-btn" onclick="retrieve1st()">next</button>
                                </div>
                               </form>
                               <form action="" method="post" onsubmit="return false" class="regForm" id="step2" style="display: none;">
                                <div class="reg_cont_input">
                                	<label class="login-icon pos">
										<i class="fa fa-phone fa-2x fss"></i>
                                        <input type="text" name="phone" autocomplete="off" class="log-input mls" datatype="username" maxlength="11" placeholder="please enter your phone number">
                                        <div class="Validform_checktip"></div>
									</label>
                               
                                  
                                   <label class="login-icon fg-code pos">
                                            <i class=" fss log-i fa fa-envelope fa-2x"></i>
                                            <input id="forgot-code" type="text" name="smsCode" placeholder="please enter the verification code" maxlength="6" class="log-input-half login-pwd mls log-input" style="margin-left: 40px!important;">
                                        </label>
                                        <div class="fg-code-wp"> 
                                            <button class="btn btn-default" style="border-radius: 0; padding: 9px 12px; margin-left: 40px;"id="btnSendCode" onclick="sendSmsCode()">Send Verification Code</button>
                                        </div>
                                    <!-- <a href="login4.html" class="lang-btn" id="regInputSubmit">
                                    	<span>下 一 步</span>
                                    </a> -->
                                    <button type="button" class="lang-btn" onclick="retrieve2nd()" id="step2-button" disabled="disabled">next</button>
                                </div>
                               </form>
                               <form action="" method="post" onsubmit="return false" class="regForm" id="step3" style="display: none;">
                                <div class="reg_cont_input">
                                	<label class="login-icon pos">
										<i class="fa fa-unlock-alt fa-2x fss"></i>
                                        <input type="password" name="verifyCredential" autocomplete="off" class="log-input mls" maxlength="16" datatype="username"  placeholder="set new password">
                                        <span style="color: #999;font-size: 13px;">8-16 letters and digits</span>
                                        <div class="Validform_checktip"></div>
									</label>
                                    
                                    <label class="login-icon pos">
										<i class="fa fa-unlock-alt fa-2x fss"></i>
                                        <input type="password" name="verifyCredential-affirm" autocomplete="off" class="log-input mls" maxlength="16" datatype="username"  placeholder="confirm the new password">
                                        <div class="Validform_checktip"></div>
									</label>
                                  
                                    <!-- <a href="login5.html" class="lang-btn" id="regInputSubmit">
                                    	<span>下 一 步</span>
                                    </a> -->
                                    <button type="button" class="lang-btn" onclick="retrieve3rd()">reset password</button>
                                </div>
                               </form>
                               <h2 style="text-align: center;" id="step4" style="display: none; text-align: center;"><i class="fa fa-check-circle-o"></i> Congratulations to you! Set up the success</h2>
                            </div><!-- .reg_left -->
                            <div class=" col-lg-1">
                            	
                            </div>
                          
                        </div>
                    </div>
                </div>
            </div>
        
        

        </li>
        <li>
        
    <link rel="stylesheet" type="text/css" th:href="@{~/css/login-fluid.css}"/>    

        </li>
    
     
      </ul>
    </div>
</div>

</div>
<div style="clear: both;">
	
</div>
<!-- footer -->


	<div class="footer" >

    <div class="agileinfo_footer_bottom1" th:replace="footer_en::footer">
		</div>
	</div>
		

<!-- //footer -->
<!-- JavaScripts -->
<script type="text/javascript" th:src="@{~/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{~/js/sleekslider.js}"></script>
<script type="text/javascript" th:src="@{~/js/app.js}"></script>
<script th:src="@{~/js/bootstrap.js}"></script>
<script th:src="@{/js/layer/layer.js}"></script>
<!-- //for bootstrap working -->
<script type="text/javascript">
	$(function(){
		//记录当前修改节点
		var step = sessionStorage.getItem('step');
		switch(step){
			case "2":
				$("#step-status1").children("span").addClass("activeli");
				$("#step-status2").children("span").addClass("activeli");
				$("#step2").show().siblings().hide();
			  	break;
			case "3":
				$("#step-status1").children("span").addClass("activeli");
				$("#step-status2").children("span").addClass("activeli");
				$("#step-status3").children("span").addClass("activeli");
				$("#step3").show().siblings().hide();
			  	break;
			case "4":
				$("#step-status1").children("span").addClass("activeli");
				$("#step-status2").children("span").addClass("activeli");
				$("#step-status3").children("span").addClass("activeli");
				$("#step-status4").addClass("activeli");
				$("#step4").show().siblings().hide();
			  	break;
			default:
				$("#step-status1").children("span").addClass("activeli");
				$("#step1").show().siblings().hide();
		}
	})
	//修改密码第一步
	function retrieve1st() {
		if($.trim($("input[name='userName']").val())==null||$.trim($("input[name='userName']").val())==""){
			layer.msg("The username can not be empty");
			return false;
		}
		if($.trim($("input[name='vrifyCode']").val())==null||$.trim($("input[name='vrifyCode']").val())==""){
			layer.msg("The verifying code cannot be empty");
			return false;
		}
		$.ajax({
			url : "/user/getUserByName",
			type : "POST",
			data : $('#step1').serialize(),
			cache : false,
			success : function(data) {
				var jsondata = JSON.parse(data); 
				if(jsondata.status=="0"){
					sessionStorage.setItem('step', 2);
					sessionStorage.setItem('userName', $("input[name='userName']").val());
					$("#step-status2").children("span").addClass("activeli");
					$("#step2").show().siblings().hide();
				}else{
					layer.msg(jsondata.msg);
				}
			},
			error : function() {
				layer.msg("Server error");
			}
		});
	}
	//发送短信
	var InterValObj; //timer变量，控制时间
	var count = 60; //间隔函数，1秒执行
	var curCount;//当前剩余秒数
	function sendSmsCode(){
		var myreg = /^1[3|4|5|7|8][0-9]{9}$/;
		if(!myreg.test($.trim($("input[name='phone']").val()))){
			layer.msg("The phone number is wrong");
			return false;
		}
		$.ajax({
			url : "/user/getUserByPhone",
			type : "POST",
			data : {'userName':sessionStorage.getItem('userName'),'phone':$("input[name='phone']").val()},
			cache : false,
			success : function(data) {
				var jsondata = JSON.parse(data); 
				if(jsondata.status=="0"){
					layer.msg(jsondata.msg);
					$("#step2-button").attr("disabled",false);
					sessionStorage.setItem('userId', jsondata.data);
					curCount = count;
					$("#btnSendCode").attr("disabled", "true");
					$("#btnSendCode").html( + curCount + "Second acquisition");
					InterValObj = setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
				}else{
					$("#step2-button").attr("disabled",true);
					layer.msg(jsondata.msg);
				}
			},
			error : function() {
				layer.msg("Server error");
			}
		});
	}
	//timer处理函数
	function SetRemainTime() {
		if (curCount == 0) {                
			clearInterval(InterValObj);//停止计时器
			$("#btnSendCode").removeAttr("disabled");//启用按钮
			$("#btnSendCode").html("Resend the verifying code");
		}
		else {
			curCount--;
			$("#btnSendCode").html( + curCount + "Second acquisition");
		}
	}
	//第二步
	function retrieve2nd(){
		var myreg = /^1[3|4|5|7|8][0-9]{9}$/;
		if(!myreg.test($.trim($("input[name='phone']").val()))){
			layer.msg("The phone number is wrong");
			return false;
		}
		if($.trim($("input[name='smsCode']").val())==null||$.trim($("input[name='smsCode']").val())==""){
			layer.msg("The verifying code cannot be empty");
			return false;
		}
		$.ajax({
			url : "/user/smsVrify",
			type : "POST",
			data : {'smsCode':$("input[name='smsCode']").val(),'phone':$("input[name='phone']").val()},
			cache : false,
			success : function(data) {
				var jsondata = JSON.parse(data); 
				if(jsondata.status=="0"){
					sessionStorage.setItem('step', 3);
					$("#step-status2").children("span").addClass("activeli");
					$("#step-status3").children("span").addClass("activeli");
					$("#step3").show().siblings().hide();
				}else{
					layer.msg(jsondata.msg);
				}
			},
			error : function() {
				layer.msg("Server error");
			}
		});
	}
	//第三步
	function retrieve3rd(){
		if($.trim($("input[name='verifyCredential']").val())==""){
			layer.msg("The password can not be empty");
			return false;
		}
		if($.trim($("input[name='verifyCredential-affirm']").val())!=$.trim($("input[name='verifyCredential']").val())){
			layer.msg("Two inconsistencies in cipher input");
			return false;
		}
		$.ajax({
			url : "/user/changePwd",
			type : "POST",
			data : {'verifyCredential':$("input[name='verifyCredential']").val(),'userId':sessionStorage.getItem('userId')},
			cache : false,
			success : function(data) {
				var jsondata = JSON.parse(data); 
				if(jsondata.status=="0"){
					sessionStorage.setItem('step', 4);
					$("#step-status1").children("span").addClass("activeli");
					$("#step-status2").children("span").addClass("activeli");
					$("#step-status3").children("span").addClass("activeli");
					$("#step-status4").addClass("activeli");
					$("#step4").show().siblings().hide();
				}else{
					layer.msg(jsondata.msg);
				}
			},
			error : function() {
				layer.msg("Server error");
			}
		});
	}
</script>
</body>
</html>